@charset "utf-8";
/* CSS Document */
.cd-nav-container { position: fixed; z-index: 10; top: 0; right: 0; width: 100%; height: 100%; overflow-y: auto; border-top:2px #8abeb2 solid; background-color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.4s 0s, box-shadow 0s 0.4s; -moz-transition: -moz-transform 0.4s 0s, box-shadow 0s 0.4s; transition: transform 0.4s 0s, box-shadow 0s 0.4s;}
.cd-nav-container.is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-overflow-scrolling: touch; box-shadow: -4px 0 30px rgba(0, 0, 0, 0.2); -webkit-transition: -webkit-transform 0.4s 0s, box-shadow 0s 0s; -moz-transition: -moz-transform 0.4s 0s, box-shadow 0s 0s; transition: transform 0.4s 0s, box-shadow 0s 0s;}
.cd-nav-container dt { height: 50px; position: relative;}
.cd-nav-container h3 { padding-left:10px; display:inline-block; line-height:50px; font-size: 1.4rem; font-weight: bold; font-family: "Lora", serif; text-transform: uppercase; color: #8abeb2;}
.close { position: absolute; height: 44px; width: 44px; right: 0; top: 50%; bottom: auto; margin-top:-13px;}
.close i{ width:25px; height:25px; background-position:-27px 0;}
.cd-nav { background-color: #f2f2f2; }
.cd-nav::after { clear: both; content: ""; display: table;}
.cd-nav li { width: 33.33%; float: left; height: calc((100vh - 50px)/4); border: 1px solid #ffffff; border-top: none; border-left: none;}
.cd-nav li:nth-of-type(3n) { border-right-width: 0; }
.cd-nav a { position: relative; display: block; width: 100%; height: 100%; text-align: center; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; }
.cd-nav a span, .cd-nav a em { position: absolute;}
.cd-nav a em { width: 100%; left: 0; top: calc(50% + 10px); color: #5c4b51; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.cd-nav a span { width: 32px; height: 32px; top: calc(50% - 25px); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background:url(../images/mainmenu.png) no-repeat; -webkit-background-size:65px 420px; -moz-background-size:65px 420px; background-size:65px 420px;}
.cd-nav a span.home{ background-position:0 0;}
.cd-nav a span.dbhome{ background-position:-33px -272px;}
.cd-nav a span.bus{ background-position:0 -34px;}
.cd-nav a span.subway{ background-position:0 -69px;}
.cd-nav a span.education{ background-position:0 -103px;}
.cd-nav a span.tourism{ background-position:-33px 0;}
.cd-nav a span.hotel{ background-position:-33px -34px;}
.cd-nav a span.food{ background-position:-33px -69px;}
.cd-nav a span.shopping{ background-position:-33px -103px;}
.cd-nav a span.life_service{ background-position:0 -137px;}
.cd-nav a span.decorate{ background-position:-33px -137px;}
.cd-nav a span.house{ background-position:0 -171px;}
.cd-nav a span.leisure{ background-position:-33px -171px;}
.cd-nav a span.sports{ background-position:0 -204px;}
.cd-nav a span.government{ background-position:-33px -204px;}
.cd-nav a span.guide{ background-position:0 -272px;}
.cd-nav a span.pet{ background-position:0 -237px;}
.cd-nav a span.others{ background-position:-33px -237px;}
.cd-nav a span.medical{ background-position:0 -308px;}
.cd-nav a span.subject { width:30px; background-position:-35px -308px;}
  .cd-nav a span.traffic { width:33px; background-position:0 -343px;}  
  .cd-nav a span.zhuanti { width:36px; background-position:0 -377px;}  
  .cd-nav a span.media { width:28px; background-position:-37px -343px;}  


@media only screen and (min-width: 700px) {
  .cd-nav-container { width: 70%; }
  .cd-nav-container dt { height: 80px; padding-top: 1.5em; }
  .cd-nav li { width:25%; height: calc((100vh - 116px)/4); }
  .cd-nav li:nth-of-type(3n) { border-right-width: 1px; }
  .cd-nav li:nth-of-type(4n) { border-right-width: 0; }
  .cd-nav a span { height: 64px; width: 64px; top: calc(50% - 56px);  -webkit-background-size:130px 840px; -moz-background-size:130px 840px; background-size:130px 840px;}  
.cd-nav a span.dbhome{ background-position:-66px -544px;}
  .cd-nav a span.bus{ background-position:0 -68px;}
  .cd-nav a span.subway{ background-position:0 -138px;}
  .cd-nav a span.education{ background-position:0 -206px;}
  .cd-nav a span.tourism{ background-position:-66px 0;}
  .cd-nav a span.hotel{ background-position:-66px -68px;}
  .cd-nav a span.food{ background-position:-66px -138px;}
  .cd-nav a span.shopping{ background-position:-66px -206px;}
  .cd-nav a span.life_service{ background-position:0 -274px;}
  .cd-nav a span.decorate{ background-position:-66px -274px;}
  .cd-nav a span.house{ background-position:0 -342px;}
  .cd-nav a span.leisure{ background-position:-66px -342px;}
  .cd-nav a span.sports{ background-position:0 -408px;}
  .cd-nav a span.government{ background-position:-66px -408px;}  
  .cd-nav a span.guide{ background-position:0 -544px;}
  .cd-nav a span.pet{ background-position:0 -474px;}
  .cd-nav a span.others{ background-position:-66px -474px;}
  .cd-nav a span.medical{ background-position:0 -616px;} 
  .cd-nav a span.subject { width:60px; background-position:-70px -616px;}
  .cd-nav a span.traffic { width:66px; background-position:0 -686px;}    
  .cd-nav a span.zhuanti { width:72px; background-position:0 -754px;}     
  .cd-nav a span.media { width:56px; background-position:-74px -686px;}  
  .cd-nav em { font-size: 2.2rem; font-weight: 300; top: calc(50% + 21px);}
  .cd-section { header: 102vh; } 
}

.cd-overlay { position: fixed; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; background-color: rgba(0, 0, 0, 0.35); visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s; -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s; transition: opacity 0.4s 0s, visibility 0s 0.4s; z-index:5;}
.cd-overlay.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.4s 0s, visibility 0s 0s; -moz-transition: opacity 0.4s 0s, visibility 0s 0s; transition: opacity 0.4s 0s, visibility 0s 0s; }

.cd-section { position: absolute; z-index: 2; top: 0; left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0s 0.4s;
  -moz-transition: -moz-transform 0s 0.4s;
  transition: transform 0s 0.4s;
}

@-webkit-keyframes cd-shock {
  0% { -webkit-transform: rotate(0); }
  30% { -webkit-transform: rotate(10deg); }
  60% { -webkit-transform: rotate(-10deg); }
  100% { -webkit-transform: rotate(0); }
}
@-moz-keyframes cd-shock {
  0% { -moz-transform: rotate(0); }
  30% { -moz-transform: rotate(10deg); }
  60% { -moz-transform: rotate(-10deg); }
  100% { -moz-transform: rotate(0); }
}
@keyframes cd-shock {
  0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
  30% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
  60% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); }
  100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); }
}
